<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/6/18
  Time: 10:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>分类客户统计</title>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script type="text/javascript" src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" media="all">
</head>
<body>
<form class="layui-form">
    <div class="layui-item" style="padding-left: 250px;padding-top:30px;height: 40px">
        <div class="layui-inline">
            <label class="layui-form-label">统计对象</label>
            <div class="layui-input-inline" style="width: 150px;height: 40px;">
                <select name="selectType">
                    <option value="1" selected="">客户信用度</option>
                    <option value="2">客户等级</option>
                    <option value="3">客户成熟度</option>
                    <option value="4">客户来源</option>
                    <option value="5">客户状态</option>
                    <option value="6">客户类别</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <button id="add" class="layui-btn layui-btn-primary" type="button">确定</button>
            </div>
        </div>
    </div>
</form>
<div id="main" style="width: 1300px;height:400px;"></div>
<script src="${pageContext.request.contextPath}/static/layui/layui.js" charset="utf-8"></script>

<script type="text/javascript">
    layui.use(['layer','form'], function() {
        var $ = layui.$;
        var form = layui.form;
        var myChart = echarts.init(document.getElementById('main'));

        //构建公司近n天的新增/损失客户量
        BuildCustomerBase();

        $("#add").click(function(){
            BuildCustomerBase();
        });

        function BuildCustomerBase(){
            //构建图表data数
            var dataArray = [];
            $.ajax({
                url: "${pageContext.request.contextPath}/statistics/CustomerStatistics",
                type: "post",
                asnyc: false,
                data: { "selectType":$('select[name=selectType]').val()},
                dataType: "json",
                beforeSend: function () {
                    loading = layer.load();
                },
                success: function (res) {
                    var res_data = res.data;
                    if (res.code != 0) {
                        layer.closeAll('loading');
                        layer.msg(res.msg);
                        return;
                    }
                    var dataJson = {};  //构建json对象，日期为key 统计数值为value
                    for (var i = 0; i < res_data.length; i++) {
                        dataJson[res_data[i].name] = res_data[i].price;
                    }
                    //构建图表data数组
                    for (var key in dataJson) {
                        if (dataJson[key] != null) {
                            dataArray.push([key, dataJson[key]]);
                        } else {
                            dataArray.push([key, dataJson[key]]);
                        }
                    }
                    console.log(dataArray)
                },
                error:function(){
                    layer.msg("服务器开小差了!");
                }
                ,
                complete:function(){
                    layer.close(loading);
                    var head = ["name", "price"];
                    dataArray.unshift(head);
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption({
                        title : {
                            text: '客户新增趋势'
                        },
                        dataset: {
                            source: dataArray
                        },
                        legend:{  //不同的线的类型
                            data: ["客户新趋势"]
                        },
                        toolbox:{  //工具栏
                            show: true,
                            feature:{
                                magicType: {type: ['line', 'bar']},  //图形切换
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        tooltip:{
                            show : true,
                            trigger: "axis"
                        },
                        grid: {containLabel: true},
                        xAxis: {name: '数量'},
                        yAxis: {type: 'category'},
                        series: [
                            {
                                name:'客户新趋势',
                                type: 'bar',
                                encode: {
                                    x: 'price',
                                    y: 'name'
                                }
                            }
                        ]
                    });
                }
            });
        }
    });
</script>
</body>

</html>